<template>
    <h2>readonly和shallowReadonly</h2>
    <h3>state:{{state2}}</h3>

    <hr>
    <button @click="update">更新数据</button>
</template>

<script lang="ts">

import {
    computed,
    onMounted,
    shallowReactive,
    shallowRef,
    onBeforeUnmount,
    watchEffect,
    toRefs,
    defineComponent,
    reactive,
    ref,
    watch,
    readonly, shallowReadonly
} from "vue";





export default {
    name: "App",
    setup() {
        // 深度响应式
        let state = reactive({
            name: "鸣人",
            age: 20,
            car: {
                name: "奔驰",
                color: "red"
            }
        })

        // 深度只读
        // let state2 = readonly(state)

        // 浅只读， 里面的属性可以修改
        let state2 = shallowReadonly(state)


        function update() {
            state2.car.name = "Dfdf"
        }
        return {
            state2,update
        }
    }
}
</script>

<style>

</style>